import React from 'react'
import InputList from '../ui-components/inputList'
import Code from './Code'
import style from './style'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { clearAtList, fetchAtList } from '../actions/home.action'

export default 
@connect(({ app }) => ({ app }), dispatch => ({actions: bindActionCreators({ fetchAtList, clearAtList }, dispatch)}))
class extends React.Component {

	state = {
		value: ''
	}

	handleSelect(obj, i) {
		console.log(i)
		console.log(obj)
	}

	handleChange(value) {
		this.setState({
			value
		})
	}

  render() {
    const { atList } = this.props.app
    return (
      <div className={style.root}>
        <Code>{'<InputList />'}</Code>
        <div style={{width: '330px'}}>
          <InputList
						label="搜索"
						fetch={this.props.actions.fetchAtList}
						clear={this.props.actions.clearAtList}
						onSelect={::this.handleSelect}
						onChange={::this.handleChange}
            list={atList}
          />
        </div>
				<div>{ this.state.value }</div>
      </div>
    )
  }
}
